<template>
  <div class="bottom-charts">
    <div class="bc-chart-item" ref="houruv">
    </div>
    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item" ref="daypv">
    </div>

    <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item" ref="hourpv">
    </div>

  </div>
</template>

<script>
import { getxyDaypv,getxyHouruv,getxyHourpv } from "@/api/metrics"
export default {
  name: 'BottomCharts',
  data () {
    return {
    }
  },
  mounted () {
    this.loadData()
    // eslint-disable-next-line no-unused-vars
    this.timer = setInterval(this.loadData, 1000 * 60 * 10)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    async loadData() {
      const daypv = await getxyDaypv()
      const hourpv = await getxyHourpv()
      const houruv = await getxyHouruv()
          this.daypv = this.$echarts.init(this.$refs.daypv)
          this.hourpv = this.$echarts.init(this.$refs.hourpv)
          this.houruv = this.$echarts.init(this.$refs.houruv)
          let vData = []
          let kData = []
      console.log(daypv.data.xyDaypv)
      daypv.data.xyDaypv.filter(item => {
            vData.push(item.name)
            kData.push(Math.round(item.value / 1000))
          })
          let daypvoption
          daypvoption = {
            title: {
              text: 'PV(每天)',
              x: 'center',
              textStyle: {
                color: '#fff',
                fontSize: '20',
                fontWeight: '400'
              }
            },
            grid: {
              left: '12%',
              top: '15%',
              bottom: '12%',
              right: '8%'
            },
            xAxis: {
              data: vData,
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 129, 109,.1)',
                  width: 1
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#999',
                  fontSize: 12
                }
              }
            },
            yAxis: [{
              name: '单位: k',
              nameTextStyle: {
                color: 'rgb(170,170,170)'
              },
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,129,109,0.1)',
                  width: 1
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#999'
                }
              },
              splitArea: {
                areaStyle: {
                  color: 'rgba(255,255,255,0.5)'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(255, 129, 109, 0.1)',
                  width: 0.5,
                  type: 'dashed'
                }
              }
            }
            ],
            series: [{
              type: 'pictorialBar',
              barCategoryGap: '0%',
              symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
              label: {
                show: true,
                position: 'top',
                distance: 15,
                color: '#08dffe',
                fontWeight: 'bolder',
                fontSize: 15
              },
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#9A11FF'
                    }, {
                      offset: 1,
                      color: '#08dffe'
                    }],
                    global: false
                  }
                },
                emphasis: {
                  opacity: 1
                }
              },
              data: kData
            }]
          }
          let xData = []
          let yData = []
      hourpv.data.xyHourpv.filter(item => {
            xData.push(item.name)
            yData.push(item.value)
          })
          let hourpvoption
          hourpvoption = {
            title: {
              text: 'PV(每小时)',
              x: 'center',
              textStyle: {
                color: '#fff',
                fontSize: '20',
                fontWeight: '400'
              }
            },
            grid: {
              top: '15%',
              left: '-5%',
              bottom: '5%',
              right: '5%',
              containLabel: true
            },
            tooltip: {
              show: true
            },
            animation: false,
            xAxis: [{
              type: 'category',
              data: xData,
              axisTick: {
                alignWithLabel: true
              },
              nameTextStyle: {
                color: '#82b0ec'
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#82b0ec'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#aca0a0'
                },
                margin: 30
              }
            }],
            yAxis: [{
              show: false,
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#0c2c5a'
                }
              },
              axisLine: {
                show: false
              }
            }],
            series: [{
              name: '',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, -6],
              symbolPosition: 'end',
              z: 12,
              // "barWidth": "0",
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  // "formatter": "{c}%"
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#34DCFF'
                }
              },
              color: '#2DB1EF',
              data: yData
            }, {
              name: '',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, 7],
              // "barWidth": "20",
              z: 12,
              color: '#2DB1EF',
              data: yData
            },
            {
              name: '',
              type: 'pictorialBar',
              symbolSize: [50, 15],
              symbolOffset: [0, 12],
              z: 10,
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderColor: '#609af1',
                  borderType: 'solid',
                  borderWidth: 2
                }
              },
              data: yData
            },
            {
              name: '',
              type: 'pictorialBar',
              symbolSize: [70, 20],
              symbolOffset: [0, 18],
              z: 10,
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderColor: '#94d6f5',
                  borderType: 'solid',
                  borderWidth: 4
                }
              },
              data: yData
            },
            {
              type: 'bar',
              // silent: true,
              barWidth: '40',
              barGap: '10%', // Make series be overlap
              barCateGoryGap: '10%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: '#38B2E6'
                  },
                  {
                    offset: 1,
                    color: '#0B3147'
                  }
                  ]),
                  opacity: 0.8
                }
              },
              data: yData
            }
            ]
          }
          let uvxData = []
          let uvyData = []
      houruv.data.xyHouruv.filter(item => {
            uvxData.push(item.name)
            uvyData.push(item.value)
          })
          let houruvoption
          houruvoption = {
            title: {
              text: 'UV(每小时)',
              x: 'center',
              textStyle: {
                color: '#fff',
                fontSize: '20',
                fontWeight: '400'
              }
            },
            grid: {
              top: '15%',
              left: '-5%',
              bottom: '5%',
              right: '5%',
              containLabel: true
            },
            tooltip: {
              show: true
            },
            animation: false,
            xAxis: [{
              type: 'category',
              data: uvxData,
              axisTick: {
                alignWithLabel: true
              },
              nameTextStyle: {
                color: '#82b0ec'
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#82b0ec'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#aca0a0'
                },
                margin: 30
              }
            }],
            yAxis: [{
              show: false,
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#0c2c5a'
                }
              },
              axisLine: {
                show: false
              }
            }],
            series: [{
              name: '',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, -6],
              symbolPosition: 'end',
              z: 12,
              // "barWidth": "0",
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  // "formatter": "{c}%"
                  fontSize: 15,
                  fontWeight: 'bold',
                  color: '#34DCFF'
                }
              },
              color: '#2DB1EF',
              data: uvyData
            }, {
              name: '',
              type: 'pictorialBar',
              symbolSize: [40, 10],
              symbolOffset: [0, 7],
              // "barWidth": "20",
              z: 12,
              color: '#2DB1EF',
              data: uvyData
            },
            {
              name: '',
              type: 'pictorialBar',
              symbolSize: [50, 15],
              symbolOffset: [0, 12],
              z: 10,
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderColor: '#609af1',
                  borderType: 'solid',
                  borderWidth: 2
                }
              },
              data: uvyData
            }, {
              name: '',
              type: 'pictorialBar',
              symbolSize: [70, 20],
              symbolOffset: [0, 18],
              z: 10,
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderColor: '#94d6f5',
                  borderType: 'solid',
                  borderWidth: 4
                }
              },
              data: uvyData
            },
            {
              type: 'bar',
              // silent: true,
              barWidth: '40',
              barGap: '10%', // Make series be overlap
              barCateGoryGap: '10%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: '#38B2E6'
                  },
                  {
                    offset: 1,
                    color: '#0B3147'
                  }
                  ]),
                  opacity: 0.8
                }
              },
              data: uvyData
            }
            ]
          }
          this.daypv.setOption(daypvoption)
          this.hourpv.setOption(hourpvoption)
          this.houruv.setOption(houruvoption)
    }
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 33.3333%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1, .decoration-2, .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
</style>
